<template>
	<div>
		<el-form label-width="80px" class="demo-ruleForm">
			<div>1/3基本信息</div>
			<el-row>
				<el-col :span="8">
					<el-form-item label="姓名">
					  <el-input v-model="sturow.student_name" placeholder="请输入姓名" :disabled="true" />
					</el-form-item>
				</el-col>
				<el-col :span="4">
					<el-form-item label="性别">
					  <el-select v-model="sturow.sex" placeholder="男/女" :disabled="true">
					    <el-option label="男" :value="1" />
						<el-option label="女" :value="2" />
					  </el-select>
					</el-form-item>
				</el-col>
				<el-col :span="4">
					<el-form-item label="民族">
					  <el-input v-model="sturow.nation" placeholder="汉" :disabled="true" />
					</el-form-item>
				</el-col>
				<el-col :span="4">
					<el-form-item label="国籍">
					  <el-input v-model="sturow.nationality" placeholder="中国" :disabled="true" />
					</el-form-item>
				</el-col>
				<el-col :span="4">
					<el-form-item label="出生年月">
					  <el-input v-model="sturow.birth_date" placeholder="日期" :disabled="true" />
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="证件号码">
					  <el-input v-model="sturow.card" placeholder="请输入证件号码" class="input-with-select" :disabled="true" style="width: 500px;">
					    <el-select v-model="sturow.card_type" slot="prepend" placeholder="请选择证件类型" style="width: 90px" :disabled="true">
					      <el-option label="身份证" :value="1" />
					    </el-select>
					  </el-input>
					</el-form-item>
				</el-col>
				<el-form-item>
				  <el-switch v-model="value1" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
				  此手机号是否关联智助教育APP学生版
				</el-form-item>
			</el-row>
			<div>2/3家庭信息</div>
			<el-row>
				<div v-for="(item,index) in sturow.home">
					<el-col :span="8">
						<el-form-item label="家长姓名">
						  <el-input v-model="item.parent_name" placeholder="请输入家长姓名" :disabled="true" />
						</el-form-item>
					</el-col>
					<el-col :span="4">
						<el-form-item label="家长称谓">
							<el-select v-model="item.relation" placeholder="男/女" :disabled="true">
								<el-option label="爸爸" :value="1" />
								<el-option label="妈妈" :value="2" />
								<el-option label="爷爷" :value="3" />
								<el-option label="奶奶" :value="4" />
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="联系电话">
						  <el-input v-model="sturow.phone" placeholder="请输入" :disabled="true">
						    <template slot="prepend">+86</template>
						  </el-input>
						</el-form-item>
					</el-col>
					<el-form-item>
					  <el-switch v-model="value2" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
					  此手机号是否关联智助教育APP学生版
					</el-form-item>
				</div>
			</el-row>
			<div>3/3添加购物车</div>
			<el-row>
				<div class="shopcar" :style="{'justify-content': shopcarlist.length==0?'center':'flex-start','height': shopcarlist.length==0?100+'px':''}" @click="addshopcar">
					<i class="el-icon-shopping-cart-2" v-if="shopcarlist.length==0"></i>
					<el-button @click="addshopcar" v-if="shopcarlist.length==0">添加购买项目</el-button>
					<el-row style="width: 100%;" v-if="shopcarlist.length!=0">
						<div v-for="(item,index) in shopcarlist" class="app-container">
							<el-col :span="4" class="list">
								<div>{{item.lession_name}}</div>
								<div>{{item.pay_num}}</div>
							</el-col>
							<!-- <el-col :span="3" class="list">
								<div v-if="item.lession.lession_type == 1">线上</div>
								<div v-if="item.lession.lession_type == 2">线下</div>
							</el-col> -->
							<el-col :span="20" style="text-align: right;">
								<div>金额:{{item.price}}元</div>
							</el-col>
						</div>
					</el-row>
				</div>
				<!-- 收费核算：
				<hr /> -->
				<div style="text-align: right;">合计费用：{{order.total_price}}</div>
				<el-form-item label="备注:">
				  <el-input type="textarea" placeholder="请输入，不超过1000字" maxlength="1000" />
				</el-form-item>
				<div style="text-align: right;">
					<el-button type="primary" @click="addOrd">确认提交</el-button>
				</div>
			</el-row>
		</el-form>
		<!-- 添加购物车弹窗 -->
		<el-dialog title="添加购物车" :visible.sync="showCar" width="1500px" append-to-body>
			<sign-des :semesterList="semesterList" :lessionList="lessionList" :shopcarlistsign="shopcarlistsign"></sign-des>
		</el-dialog>
	</div>
</template>

<script>
import { addOrder } from '@/api/studentRecruit.js'
import signDes from './signDes.vue'
export default {
	components:{
		signDes
	},
	data(){
		return{
			showCar:false, //弹窗状态
			value1:false,
			value2:false,
			shopcarlist:[], //购物车
			order:{
				unid:'',
				student_id:0, //学生id
				price:0, //需要支付的金额
				total_price:0, //总金额
				type:1, //缴费类型 1报名交易 2 补交交易 3 代付款
				order_num:'zzzzzzedccccsOrder455', //订单编号
				pay_item:[], //购买的项目
				discount_price:1, //优惠价格
			}
		}
	},
	created() {
		console.log(this.sturow);
	},
	methods:{
		async addOrd(){
			console.log('添加的数据',this.order);
			let data = await addOrder(this.order)
			if(data.code == 200){
				console.log(data);
				this.shopcarlist = []
				this.$message.success('报名成功！')
				this.order.pay_item = []
				this.order.total_price = 0
			}else{
				this.$message.error('报名失败！')
			}
		},
		shopcarlistsign(row,flag){
			this.order.total_price = 0
			console.log('this.order',this.order);
			this.shopcarlist = row
			this.order.student_id = this.sturow.unid
			this.showCar = flag
			if(flag){
				this.order.pay_item = []
			}else{
				console.log('购物车列表',row);
				for (var i = 0; i < this.shopcarlist.length; i++) {
					this.order.total_price+=this.shopcarlist[i].price
				}
				this.order.price = this.order.total_price
				console.log(row);
				for (var i = 0; i < row.length; i++) {
					this.order.pay_item.push({
						pay_id:row[i].unid,
						pay_num:row[i].pay_num,
						type:row[i].type,
					})
				}
			}
			console.log('order',this.order);
		},
		addshopcar(){
			this.showCar = true
		}
	},
	props:{
		sturow:{
			type:Object,
			default:null,
		},
		semesterList:{
			type:Array,
			default:[],
		},
		lessionList:{
			type:Array,
			default:[],
		},
	}
}
</script>

<style lang="scss">
	.price{
		width: 80%;
		text-align: right;
	}
	.shopcar{
		position: relative;
		flex-direction: row;
		border: 1px solid #000000;		
		border-radius: 25px;
		display: flex;
		align-items: center;
		margin: 10px 0 10px 0;
		width: 100%;
		
		i{
			font-size: 80px;
		}
		
		button{
			position: absolute;
			border-radius: 25px;
		}
	}
	.list{
		flex-direction: row;
		display: flex;
		align-items: center;
		
		div{
			margin-right: 50px;
		}
	}
</style>
